<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <title>黑马头条</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="../../../plugins/vant/index.css">
    <!-- 页面样式 -->
    <link rel="stylesheet" href="../../../plugins/css/index.css">
</head>

<body>
<div id="app">
    <div class="article">
        <script>
                        var _authorApUserId= 4
        </script>
        <div style="display:none;">4</div>
            <van-row>
                <van-col span="24" class="article-title" >马奎尔：滕哈赫带来了很多能量 C罗为球队带来了进球</van-col>
            </van-row>

            <van-row type="flex" align="center" class="article-header">
                <van-col span="3">
                    <van-image round class="article-avatar" src="https://p3.pstatp.com/thumb/1480/7186611868"></van-image>
                </van-col>
                <van-col span="16">
                    <div>admin</div>
                    <div>2022-8-7 16:48:32</div>

                </van-col>
                <van-col span="5">
                    <van-button round :icon="relation.isfollow ? '' : 'plus'" type="info" class="article-focus"
                                :text="relation.isfollow ? '取消关注' : '关注'" :loading="followLoading" @click="handleClickArticleFollow">
                    </van-button>
                </van-col>
            </van-row>
        <van-row class="article-content">
                        <van-col span="24" class="article-text">直播吧8月7日讯 在首轮对阵布莱顿的比赛前，曼联队长马奎尔接受了天空体育的采访，他谈到了自己和球队目前的一些情况。</van-col>
                        <van-col span="24" class="article-text">关于球队的状态</van-col>
                        <van-col span="24" class="article-text">马奎尔：“真的很棒，很明显这是在上赛季之后的新开始。滕哈赫带来了很多能量，带来了非常积极的氛围，到目前为止，球员们都很好地接受了这一点。之前只是季前赛，但我们身体状态很好，我们准备好了，我们期待着这个赛季。”</van-col>
                        <van-col span="24" class="article-text">关于球队的目标</van-col>
                        <van-col span="24" class="article-text">马奎尔：“这家俱乐部的一切都是关于赢得奖杯的，就我们上个赛季的情况而言，我们必须看到巨大的进步。对于这家俱乐部来说，上个赛季的表现是不可接受的，我们很早就在杯赛中出局，也没有给球迷带来任何可以期待的东西。”</van-col>
                        <van-col span="24" class="article-text">“我们必须确保本赛季的大部分时间我们都参与到竞争当中，到三月份的时候，我们仍然能够在主要的赛事中竞争，参加重要的比赛。上个赛季，在最后的两三个月，我们一直都只有周末的比赛，这家俱乐部并不习惯这一点，情况也不应该是这样的。”</van-col>
                        <van-col span="24" class="article-text">“我们在每一项杯赛中都出局了，在联赛中也发挥不佳，我们必须在表现方面寻求重要进步，并让我们的球迷感到兴奋。你总是能够在日常生活中找到借口，但我们需要做的就是审视自己。作为个人，如果我们的表现不够好，那么团队最终也无法拿出好的整体表现。”</van-col>
                        <van-col span="24" class="article-text">关于继续担任队长</van-col>
                        <van-col span="24" class="article-text">马奎尔：“现在我已经在这家俱乐部的三任主帅麾下担任队长，这给了我很多信心，我感觉到了教练和更衣室的信任。成为这家俱乐部的队长是一项巨大的荣誉，我知道这在媒体上有很多猜测，我现在已经习惯了，我已经强大到可以接受它带来的一切，我期待在本赛季再次领导这支球队。”</van-col>
                        <van-col span="24" class="article-text">是否想过不再担任队长？</van-col>
                        <van-col span="24" class="article-text">马奎尔：“一点都没想过，为这家俱乐部效力是一种巨大的荣誉，成为队长并带领这些球员在老特拉福德踢球的感觉真是太棒了。我的职业生涯经历了很多起伏，现在我正处于一个经验丰富的阶段。我29岁了，我为我的国家、为俱乐部踢了很多场比赛，我想我能够接受相应的批评和媒体的猜测。”</van-col>
                        <van-col span="24" class="article-text">“每个人都喜欢得到正面评价，这家俱乐部的每个人都知道过去的那种感觉。你也知道被批评的感觉是怎样的，你必须做出回应。在俱乐部的前两年，我走在正确的路上，作为一个团队我们也正在进步。去年对我个人而言是一个重大挫折，对球队和俱乐部来说也是如此，我们需要确保我们再次前进。”</van-col>
                        <van-col span="24" class="article-text">关于利桑德罗的到来</van-col>
                        <van-col span="24" class="article-text">马奎尔：“让他来到这里真的太棒了，在我的整个职业生涯中，我踢过左中卫和右中卫。我知道很多人都是这么过来的，我在英格兰也很多次这样做过，只要我能带来帮助，这就是我想做的。”</van-col>
                        <van-col span="24" class="article-text">C罗为球队带来了什么？</van-col>
                        <van-col span="24" class="article-text">马奎尔：“进球，C罗是一位出色的球员，有着非常棒的个性。我知道围绕自己有很多猜测是什么感觉，但他承受了更多这样的东西。他所做的一切都在一定程度上被细细观察，这就是你为这家俱乐部效力时要面对的，另一方面，当事情积极的时候，你会得到很多赞美，这就是足球。”</van-col>
                        <van-col span="24" class="article-text">（马东宇）</van-col>
        </van-row>

        <van-row type="flex" justify="center" class="article-action">
            <van-col>
                <van-button round :icon="relation.islike ? 'good-job' : 'good-job-o'" class="article-like"
                            :loading="likeLoading" :text="relation.islike ? '取消赞' : '点赞'" @click="handleClickArticleLike"></van-button>
                <van-button round :icon="relation.isunlike ? 'delete' : 'delete-o'" class="article-unlike"
                            :loading="unlikeLoading" @click="handleClickArticleUnlike">不喜欢</van-button>
            </van-col>
        </van-row>

        <!-- 文章评论列表 -->
        <van-list v-model="commentsLoading" :finished="commentsFinished" finished-text="没有更多了"
                  @load="onLoadArticleComments">
            <van-row id="#comment-view" type="flex" class="article-comment" v-for="(item, index) in comments" :key="index">
                <van-col span="3">
                    <van-image round src="https://p3.pstatp.com/thumb/1480/7186611868" class="article-avatar"></van-image>
                </van-col>
                <van-col span="21">
                    <van-row type="flex" align="center" justify="space-between">
                        <van-col class="comment-author" v-html="item.authorName"></van-col>
                        <van-col>
                            <van-button round :icon="item.operation === 0 ? 'good-job' : 'good-job-o'" size="normal"
                                        @click="handleClickCommentLike(item)">{{ item.likes || '' }}
                            </van-button>
                        </van-col>
                    </van-row>

                    <van-row>
                        <van-col class="comment-content" v-html="item.content"></van-col>
                    </van-row>
                    <van-row type="flex" align="center">
                        <van-col span="10" class="comment-time">
                            {{ item.createdTime | timestampToDateTime }}
                        </van-col>
                        <van-col span="3">
                            <van-button round size="normal" v-html="item.reply" @click="showCommentRepliesPopup(item.id)">回复 {{
                                item.reply || '' }}
                            </van-button>
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </van-list>
        <van-row>
            <van-col span="24" >
                <van-button round size="normal" @click="loadMoreComments">
                    查看更多
                </van-button>
            </van-col>
        </van-row>
    </div>
    <!-- 文章底部栏 -->
    <van-row type="flex" justify="space-around" align="center" class="article-bottom-bar">
        <van-col span="13">
            <van-field v-model="commentValue" placeholder="写评论">
                <template #button>
                    <van-button icon="back-top" @click="handleSaveComment"></van-button>
                </template>
            </van-field>
        </van-col>
        <van-col span="3">
            <van-button icon="comment-o" @click="handleScrollIntoCommentView"></van-button>
        </van-col>
        <van-col span="3">
            <van-button :icon="relation.iscollection ? 'star' : 'star-o'" :loading="collectionLoading"
                        @click="handleClickArticleCollection"></van-button>
        </van-col>
        <van-col span="3">
            <van-button icon="share-o"></van-button>
        </van-col>
    </van-row>

    <!-- 评论Popup 弹出层 -->
    <van-popup v-model="showPopup" closeable position="bottom"
               :style="{ width: '750px', height: '60%', left: '50%', 'margin-left': '-375px' }">
        <!-- 评论回复列表 -->
        <van-list v-model="commentRepliesLoading" :finished="commentRepliesFinished" finished-text="没有更多了"
                  @load="onLoadCommentReplies">
            <van-row id="#comment-reply-view" type="flex" class="article-comment-reply"
                     v-for="(item, index) in commentReplies" :key="index">
                <van-col span="3">
                    <van-image round src="https://p3.pstatp.com/thumb/1480/7186611868" class="article-avatar"></van-image>
                </van-col>
                <van-col span="21">
                    <van-row type="flex" align="center" justify="space-between">
                        <van-col class="comment-author" v-html="item.authorName"></van-col>
                        <van-col>
                            <van-button round :icon="item.operation === 0 ? 'good-job' : 'good-job-o'" size="normal"
                                        @click="handleClickCommentReplyLike(item)">{{ item.likes || '' }}
                            </van-button>
                        </van-col>
                    </van-row>

                    <van-row>
                        <van-col class="comment-content" v-html="item.content"></van-col>
                    </van-row>
                    <van-row type="flex" align="center">
                        <!-- TODO: js计算时间差 -->
                        <van-col span="10" class="comment-time">
                            {{ item.createdTime | timestampToDateTime }}
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </van-list>
        <!-- 评论回复底部栏 -->
        <van-row type="flex" justify="space-around" align="center" class="comment-reply-bottom-bar">
            <van-col span="13">
                <van-field v-model="commentReplyValue" placeholder="写评论">
                    <template #button>
                        <van-button icon="back-top" @click="handleSaveCommentReply"></van-button>
                    </template>
                </van-field>
            </van-col>
            <van-col span="3">
                <van-button icon="comment-o"></van-button>
            </van-col>
            <van-col span="3">
                <van-button icon="star-o"></van-button>
            </van-col>
            <van-col span="3">
                <van-button icon="share-o"></van-button>
            </van-col>
        </van-row>
    </van-popup>
</div>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="../../../plugins/js/vue.min.js">
</script>
<script src="../../../plugins/js/vant.min.js"></script>
<!-- 引入 Axios 的 JS 文件 -->
<script src="../../../plugins/js/axios.min.js"></script>
<!-- 页面逻辑 -->
<script src="../../../plugins/js/index.js"></script>
</body>
</html>
